<template>
  <el-table ref="tableRef" row-key="date" :data="list" style="width: 100%">
    <el-table-column type="index" label="序号" width="48"></el-table-column>
    <el-table-column label="图片" width="100">
      <template #default="scope">
        <el-image
          style="width: 100px; height: 100px"
          :src="scope.row.img1"
          :zoom-rate="1.2"
          :preview-src-list="[scope.row.img1,scope.row.img2,scope.row.img3,scope.row.img4]"
          :initial-index="4"
          fit="cover"
          preview-teleported
        />
      </template>
    </el-table-column>
    <el-table-column prop="proname" label="名称" width="100"></el-table-column>
    <el-table-column prop="brand" label="品牌" width="100"></el-table-column>
    <el-table-column
      prop="category"
      label="分类"
      width="100"
      column-key="date"
      :filters="[
        { text: '手机', value: '手机' },
        { text: '家电', value: '家电' },
        { text: '口红', value: '口红' },
        { text: '宠物活体', value: '宠物活体' },
      ]"
    ></el-table-column>
    <el-table-column prop="originprice" label="原价" width="100" column-key="date" sortable></el-table-column>
    <el-table-column prop="discount" label="折扣" width="100" column-key="date" sortable></el-table-column>
    <el-table-column prop="sales" label="销量" width="100" column-key="date" sortable></el-table-column>
    <el-table-column type="index" label="是否推荐" width="100">
      <template #default="scope">
        <el-switch
          v-model="scope.row.isrecommend"
          :active-value="0"
          :inactive-value="1"
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
        />
      </template>
    </el-table-column>
    <el-table-column type="index" label="操作" width="100">
      <template #default="scope">
        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination layout="prev, pager, next" @current-change="getList" :total="total" v-model:current-page="page" />
</template>

<script>
import { getProductList } from '../../service/admin';
export default {
  data() {
    return {
      list: [],
      page: 1,
      size: 10,
      total: 0
    };
  },
  created() {
    this.getList();
  },
  computed: {
    pageList() {
      return this.list.slice((this.page - 1) * 10, this.page * 10);
    }
  },
  methods: {
    getList() {
      getProductList(this.page, this.size).then(res => {
        this.list = res.data;
        this.list = this.list.filter(item => item.isrecommend === 0);
      });
    },
    handleDelete(index, row) {
      console.log(index, row);
    }
  }
};
</script>

<style >
.el-breadcrumb {
  margin-bottom: 30px;
}
</style>